<template>
	<div class=" materialShopManage wrap_common">
		<uni_tab :tabCur="tabActive" :tab-list="conle_tabList" @change="swiperChange"></uni_tab>
		<view class="contentBox">
			<view v-if="tabActive==0">
				<app-manage-list :manageData="manageData"
								 :list="list"
								 @onSearch="onSearch"
								 @openPopup="openPopup"
								 @checkList="checkList"
								 @changeAllCheck="changeAllCheck"
								 @jumpListFn="jumpListFn">
					<template v-slot:shopAwx0="{item}" >
						<div class="item_list_title">
							<div>
								<span>销售价：</span>
								<span>￥ {{item.shop_price || item.cost_price}}/{{ item.goods_unit }}</span>
							</div>
							<div>
								<span>佣金：</span>
								<span class="red_text">￥{{item.profit }}/{{ item.goods_unit }}</span>
							</div>
						</div>
					</template>
					<template v-slot:shopBwx0="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com" @click.stop="setSaleBtnFn(0, item.goods_id)">下架</div>
							<div class="shop_btn_com share_btn" @click.stop="shareBtnFn(item)">
								<i class="iconfont iconfenxiang"></i>
								赚￥
								<span class="big_text"> {{item.profit}}</span>
								/{{ item.goods_unit }}
							</div>
						</div>
					</template>
					<template v-slot:bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com" @click="allSetSaleBtnFn(0)">批量下架</div>
						</div>
					</template>
				</app-manage-list>
			</view>
			<view v-if="tabActive==1">
				<app-manage-list :manageData="manageData"
								 :list="list"
								 @onSearch="onSearch"
								 @openPopup="openPopup"
								 @checkList="checkList"
								 @changeAllCheck="changeAllCheck"
								 @jumpListFn="jumpListFn">
					<template v-slot:shopAwx1="{item}">
						<div class="item_list_title">
						<div>
							<span>销售价：</span>
							<span>￥ {{item.shop_price || item.cost_price }}/{{ item.goods_unit }}</span>
						</div>
						<div>
							<span>佣金：</span>
							<span
								class="red_text">￥{{item.profit}} /{{ item.goods_unit }}</span>
						</div>
						</div>
					</template>
					<template v-slot:shopBwx1="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com" @click.stop="delSaleBtnFn(item.goods_id)">删除</div>
							<div class="shop_btn_com primary_btn" @click.stop="setSaleBtnFn(1, item.goods_id)">
								上架
							</div>
						</div>
					</template>

					<!-- 底部按钮 -->
					<template v-slot:bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com" @click="allDelSaleBtnFn">删除</div>
							<div class="shop_btn_com primary_btn" @click="allSetSaleBtnFn(1)">上架</div>
						</div>
					</template>
				</app-manage-list>
			</view>
			<view v-if="tabActive==2">
				<app-manage-list :manageData="manageData"
								 :list="list"
								 @onSearch="onSearch"
								 @openPopup="openPopup"
								 @checkList="checkList"
								 @changeAllCheck="changeAllCheck"
								 @jumpListFn="jumpListFn">
					<template v-slot:shopAwx2="{item}">
						<div class="item_list_title">
							<div>
								<span>销售价：</span>
								<span>￥ {{item.shop_price || item.cost_price }}/{{ item.goods_unit }}</span>
							</div>
							<div>
								<span>佣金：</span>
								<span class="red_text">￥{{item.profit}}/{{ item.goods_unit }}</span>
							</div>
						</div>
					</template>
					<template v-slot:shopBwx2="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com primary_btn"
								 @click.stop="setSaleBtnFn(1, item.goods_lib_id)">上架
							</div>
							<div class="shop_btn_com share_btn" @click.stop="sourceShareBtnFn(item)">
								<i class="iconfont iconfenxiang"></i>
								赚￥
								<span class="big_text"> {{item.profit}}</span>
								/{{ item.goods_unit }}
							</div>
						</div>
					</template>
					<!-- 底部按钮 -->
					<template v-slot:bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com primary_btn" @click="allSetSaleBtnFn(1)">批量上架</div>
						</div>
					</template>

				</app-manage-list>
			</view>
			<!-- <view v-if="list.finished||list.data.length===list.total" class="noMore">没有更多了</view> -->
		</view>

		<!--筛选弹窗-->
		<view class="filter_wrap">
			<raiders-filter ref="raidersFilter"
							@filterQuery="filterQuery"
							:filter-mask-data.sync="filterMaskData"
							@filterBtnCall="filterBtnCall"/>
		</view>

		<!-- 分享弹窗 -->
		<uni-popup ref="popupFx" maxHeight="100vh">
			<div class="share_wrap">
				<div class="share_img">
					<img :src="sharePosterImg" alt/>
				</div>
			</div>
		</uni-popup>

		<add-com-icon v-if="$util.shieldReview()" @add="addRaiders"/>

		<!-- 温馨提醒 -->
		<uni-popup ref="popupTx" maxHeight="100vh">
			<div class="pop_tip">
				<h3>温馨提醒</h3>
				<!-- <div v-if="oneTipNum">
					<div class="txt">为了您的店铺有更好的展示效果，系统已为您的店铺上架了几款平台高佣金的代销产品，您可以跟进需要再进行上下架管理</div>
					<div class="btn">
						<div class="yes buttonBox1" @click="know">好哒,我知道了</div>
					</div>
				</div> -->
				<div>
					<span>{{constant.goodsPrompt}}</span>
					<div class="txt">【添加自营商品】目前还不支持手机端噢 为了更好的用户体验，您可以登录电脑进行上传，{{constant.oemObj.goodsPrompt}}
						您登录的账号：{{userInfo.mobile_phone }}（短信验证登录）
					</div>
					<div class="btn">
						<div class="yes buttonBox2" @click="copy(constant.oemObj.goodsPrompt)">复制网址</div>
						<div class="no buttonBox2" @click="closePop">再看看</div>
					</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import uni_tab from '@/components/uni_tab.vue'
import AppManageList from '@/components/appManageList'
import RaidersFilter from '@/pages/components/RaidersFilter.vue'
import { jumpShop } from '@/utils/common'
import manage from './mixins/manage'
import AddComIcon from '@/components/module/AddComIcon'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import list from '@/mixins/list.js'

// api
import { getGoodsList, getLibGoodsList, setSaleStatus, addLibGood, delGoods, goodShare } from '@/api/material'

export default {
	name: 'case-manage',
	mixins: [manage, list],
	components: {
		uni_tab,
		AppManageList,
		AddComIcon,
		RaidersFilter,
		uniPopup
	},
	data() {
		return {
			constant: this.$constant,
			tabActive: 0,
			tabList: [{ name: '出售中' }, { name: '已下架' }, { name: '货源中心' }],
			conle_tabList: [],
			isFirst: true,
			// 分享商品弹窗
			sharePosterImg: '',
			// 筛选块
			isFilter: false,
			cloneFilterMaskData: [],
			allFilterMaskData: [
				{
					title: '排序（降序）',
					// type: 2,
					key: 'source_type',
					list: [
						{
							name: '销量',
							status: false,
							id: 1,
							key: 'source_type'
						},
						{
							name: '佣金',
							status: false,
							id: 2,
							key: 'source_type'
						}
					]
				},
				{
					title: '一级分类',
					key: 'cat_id',
					list: []
				},
				{
					title: '二级分类',
					type: 2,
					key: 'cat_id',
					list: [],
					hide: false
				}
			],
			filterMaskData: [
				{
					title: '排序（降序）',
					// type: 2,
					key: 'source_type',
					list: [
						{
							name: '销量',
							status: false,
							id: 1,
							key: 'source_type'
						},
						{
							name: '佣金',
							status: false,
							id: 2,
							key: 'source_type'
						}
					]
				},
				{
					title: '品类',
					type: 2,
					key: 'cat_id',
					noMulti: true,
					list: []
				}
			],
			// 温馨提示框展示与否
			oneTipNum: true
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(option) {
		if (option.tabActive) {
			this.tabActive = option.tabActive
		}
		this.init()
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.resize()
	},
	// 加载更多
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this.getItemList()
		}
	},
	methods: {
		init() {
			this.getItemList()
		},
		resize() {
			let data = this.manageData
			data.checkList = []
			this.resetList()
			this.getItemList()
		},
		toFix(val) { return Number(val).toFixed(2) },
		// ==获取列表==
		getItemList() {
			let hostData = this.manageData
			let hostFn = this.tabActive === 2 ? getLibGoodsList : getGoodsList
			let params = {
				page: this.list.page,
				limit: this.list.limit
			}

			// 是否出售中
			if (this.tabActive != 2) {
				params.is_on_sale = this.tabActive == 0 ? 1 : 0
			}

			// 是否有搜索
			if (hostData.search) {
				params.keyword = hostData.search
			}
			// 是否有筛选分类
			if (!this.$util.isEmpty(hostData.isFilterList.catData)) {
				// params.category_id = hostData.isFilterList.catData.id
				params.category_id = hostData.isFilterList.catData.map(arr => arr.id)
			}
			// 是否有筛选排序
			if (hostData.isFilterList.source_type) {
				if (this.tabActive == 2) {
					params.order_by_sale = hostData.source_type
				} else {
					params.order_by = hostData.source_type
				}
			}

			hostFn(params).then(res => {
				uni.stopPullDownRefresh()
				if (res.status === 'success') {
					let data = res.data
					for (let i in data.list) {
						let item = data.list[i]
						item.status = false
						item._optionId = this.tabActive === 2 ? item.goods_lib_id : item.goods_id
						item._imgUrl = item.goods_image
						item._title = item.goods_name
						item._isSelf = item.is_self || 0
						item._isSelfText = item.is_self == 1 ? '自营' : '代销'

						// 金额保留两位
						let arr = ['cost_price', 'profit']
						for (let j = 0; j < arr.length; j++) {
						    let nowData = arr[j]
							item[nowData] = this.toFix(item[nowData])
						}
					}

					// 第一次进来赋值给筛选
					if (this.isFirst) {
						this.isFirst = false
						this._getClass(data.category_list)
					}

					this.conle_tabList = this.commonJS.deepCopy(this.tabList)
					this.conle_tabList[0]['name'] = ` ${this.tabList[0]['name']}(${data.count_on_sale})`
					this.conle_tabList[1]['name'] = ` ${this.tabList[1]['name']}(${data.count_no_sale})`
					this.conle_tabList[2]['name'] = ` ${this.tabList[2]['name']}(${data.count_proxy})`

					this.completes(res)
				}
			})
		},
		// ==tab滑动切换==
		swiperChange(index) {
			this.tabActive = index
			this.isFirst = true
			this.filterQuery()
		},
		// ===筛选===
		openPopup() {
			this.$refs.raidersFilter.$refs.screen.openPopup()
		},

		// 获取分类筛选
		_getClass(filterData) {
			let filterMaskData = this.tabActive == 2 ? this.allFilterMaskData[1] : this.filterMaskData[1]
			filterMaskData.list = this.$refs.raidersFilter.formatSelect(filterData, filterMaskData.key, filterMaskData.noMulti || false)
			if (this.tabActive == 2) {
				this.filterMaskData = this.commonJS.deepCopy(this.allFilterMaskData)
			} else {
				this.cloneFilterMaskData = this.commonJS.deepCopy(this.filterMaskData)
			}
			console.log(this.filterMaskData)
		},
		// 上下架
		setSaleBtnFn(type, id) {
			let params = {
				status: type
			}
			if (this.tabActive == 2) {
				params.goods_lib_id = id
			} else {
				params.goods_id = id
			}

			let hostFn = this.tabActive == 2 ? addLibGood : setSaleStatus
			this.setSaleStatusFn(hostFn, params, type, () => {
				this.resize()
			})
		},
		// 批量上下架
		allSetSaleBtnFn(type) {
			let goods_id_arr = this.manageData.checkList
			let params = {
				status: type
			}
			if (this.tabActive == 2) {
				params.goods_lib_id_arr = goods_id_arr
			} else {
				params.goods_id_arr = goods_id_arr
			}

			let hostFn = this.tabActive == 2 ? addLibGood : setSaleStatus
			this.setSaleStatusFn(hostFn, params, type, () => {
				this.resize()
			})
		},
		// 删除
		delSaleBtnFn(id) {
			console.log(id)
			let params = {
				status: 0,
				owner_user_id: this.userInfo.user_id,
				goods_id: id
			}
			this.delGoodsFn(
				delGoods,
				params,
				() => {
					this.resize()
				},
				'商品'
			)
		},
		// 批量删除
		allDelSaleBtnFn() {
			let goods_id_arr = this.manageData.checkList
			let params = {
				owner_user_id: this.userInfo.user_id,
				goods_id_arr: goods_id_arr
			}
			this.delGoodsFn(delGoods, params, () => {
				this.resize()
			})
		},
		// ==列表分享按钮==
		goodShareFn(hostData) {
			goodShare(hostData).then(res => {
				if (res.status === 'success') {
					this.sharePosterImg = res.data
					let arr = []
					arr[0] = this.sharePosterImg
					uni.previewImage({
						current: this.sharePosterImg,
						urls: arr
					})
					// this.$refs.popupFx.open()
				}
			})
		},
		// ==出售商品分享==
		shareBtnFn(item) {
			let params = {
				goods_id: item.goods_id,
				price: item.shop_price,
				share_type: 0
			}
			this.goodShareFn(params)
		},
		// == 货源商品分享==
		sourceShareBtnFn(item) {
		    let that = this
			uni.showModal({
				title: '提示',
				content: '分享后将自动将该商品上架至您的店铺',
				success: function(res) {
					if (res.confirm) {
						let params = {
							goods_lib_id: item.goods_lib_id,
							status: 1
						}
						// 上架
						addLibGood(params).then(res => {
							if (res.status === 'success') {
								let paramsChild = {
									goods_id: res.data.goods_id_arr[0],
									price: item.cost_price,
									share_type: 0
								}
								that.goodShareFn(paramsChild)
								that.resize()
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
		},
		// ==跳转商城==
		jumpListFn(item) {
			let goods_id = this.tabActive == 2 ? item.lib_goods_id : item.goods_id
			if (!goods_id) {
				this.$toast('暂无该货源商品详情！')
				return false
			}
			let jumpUrl = '/goods/' + goods_id
			jumpShop(jumpUrl, this.userInfo.user_picture)
		},
		// ==过滤弹窗==
		// 显示过滤弹窗
		filterShowBtn() {
			this.$refs.raidersFilter.filterShow()
		},
		filterHideBtn() {
			this.$refs.raidersFilter.filterHide()
		},
		// 筛选按钮回调
		filterBtnCall(items) {
			let data = this.manageData

			console.log(items)
			// 多选
			if (items.value == 'multi') {
				this.filterMaskData[2].list = items.list
			}

			if (items.key == 'source_type') {
				data.isFilterList.sourceData = ''
				data.isFilterList.sourceData = items.status ? items : ''
			} else {
				if (items.value == 'multi') {
					data.isFilterList.catData = []
				}

				if (items.status) {
					data.isFilterList.catData.push(items)
				} else {
					data.isFilterList.catData = data.isFilterList.catData.filter(filterItem => filterItem.id != items.id)
				}
			}
			this.resize()
		},
		// 清空过滤器
		filterQuery() {
			this.manageData.isFilterList.catData = []
			this.manageData.isFilterList.sourceData = ''

			this.filterMaskData = this.tabActive === 2 ? this.commonJS.deepCopy(this.allFilterMaskData) : this.commonJS.deepCopy(this.cloneFilterMaskData)
			this.resize()
		},

		closePop() {
			this.$refs.popupTx.close()
		},
		addRaiders() {
			this.$refs.popupTx.open()
		},
		copy(str) {
			this.commonJS.copyText.call(this, str)
			this.closePop()
		},
		know() {
			this.closePop()
			this.oneTipNum = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.materialShopManage {
		width: 100%;
		min-height: 100vh;
		overflow-y: auto;
		background-color: #f5f5f5;

		.share_wrap{
			.share_img{
				width: 100%;
				height: 85vh;
			}
		}

		// 公共商品分享弹窗
		.shareGoodsMask {
			width: 70%;
			border-radius: 5px; /*no*/
		}

		.share_info {
			margin-top: 10px;

			& > div {
				margin-top: 10px;
			}

			#moduleUserAttr {
				margin-right: 10px;
			}
		}

		// 公共按钮
		.shop_btn_com {
			display: flex;
			align-items: center;
			height: 56px;
			padding: 0 40px;
			font-size: 30px;
			border-radius: 50px;
			border: 1px solid $borderColorMain; /*no*/
			margin-left: 20px;
		}

		.primary_btn {
			color: #3a1b04;
			background-color: $mainColor;
			border: 1px solid $mainColor;
		}

		.no_primary_btn {
			color: #fff;
			background-color: #ccc;
			border: 1px solid #ccc;
		}

		.red_text {
			color: #e43c36;
		}

		.sub_text_color {
			color: $fontColor2;
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.pop_tip {
			padding: 30px 0 0;
			width: 560px;
			overflow: hidden;
			background-color: #fff;

			h3 {
				padding: 0 40px 20px;
				line-height: 60px;
				font-size: 32px;
			}

			.txt {
				padding: 0 40px 20px;
				line-height: 44px;
				font-size: 28px;
				color: #666;
			}

			.btn {
				display: flex;
				border-top: 1px solid #ddd;

				uni-button {
					font-size: 28px;
					flex: 1;
					background: none;
					border: none;
					line-height: 90px;
					border-radius: 0;
					&:after{
						border-radius: 0;
						border: none;
					}
				}

				button + button {
					border-left: 1px solid #ddd;
				}

				.buttonBox1{
					width: 100%;
					height: 80px;
					line-height: 80px;
					font-size: 30px;
				}
				.buttonBox2{
					width: 50%;
					height: 80px;
					line-height: 80px;
					font-size: 30px;
					&+.buttonBox2{
						border-left: 2px solid #ddd;
					}
				}
				.yes {
					color: #ff6900;
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
	.item_list_title{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		flex: 1;
		min-height: 90px;
	}
	.item_list_bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 30px;

		.share_btn {
			color: #fff;
			border-color: #ff7d6d;
			background: linear-gradient(90deg, #ff7d6d, #ff4444);
			font-size: 24px;
			padding: 0 30px;
			.iconfenxiang{
				font-size: 24px;
			}

			i {
				margin-right: 6px;
			}

			.big_text {
				font-size: 32px;
			}
		}
	}
	.shop_btn_wrap{
		display: flex;
		align-items: center;
	}
</style>
